<template>
  <view class="video-page">
    <su-video
      :src="videoUrl"
      :poster="videoPoster"
      :height="400"
      @videoTimeupdate="onTimeUpdate"
    ></su-video>
    
    <view class="video-info">
      <text class="video-title">{{ videoTitle }}</text>
      <text class="video-desc">{{ videoDesc }}</text>
    </view>
    
    <view class="control-buttons">
      <button class="control-btn" @click="changeVideo(0)">视频1</button>
      <button class="control-btn" @click="changeVideo(1)">视频2</button>
    </view>
  </view>
</template>

<script>
import suVideo from '@/sheep/ui/su-video/su-video.vue';

export default {
  components: {
    suVideo
  },
  data() {
    return {
      videoUrl: '',
      videoPoster: '',
      videoTitle: '示例视频',
      videoDesc: '这是一个使用su-video组件的示例视频播放页面',
      currentTime: 0,
      videoList: [
        {
          url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-b680-7980c8a877b8.mp4',
          poster: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6e2e0a80-4f35-11eb-b997-9918a5dda011.jpg',
          title: '示例视频1',
          desc: '这是第一个示例视频'
        },
        {
          url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7ed7f920-4f35-11eb-8ff1-d5dcf8779628.mp4',
          poster: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7ed3dec0-4f35-11eb-b997-9918a5dda011.jpg',
          title: '示例视频2',
          desc: '这是第二个示例视频'
        }
      ]
    };
  },
  onLoad() {
    // 初始化加载第一个视频
    this.changeVideo(0);
  },
  methods: {
    // 切换视频
    changeVideo(index) {
      const video = this.videoList[index];
      this.videoUrl = video.url;
      this.videoPoster = video.poster;
      this.videoTitle = video.title;
      this.videoDesc = video.desc;
    },
    
    // 视频播放进度更新
    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
      console.log('当前播放时间:', this.currentTime);
    }
  }
};
</script>

<style lang="scss" scoped>
.video-page {
  padding: 20rpx;
}

.video-info {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.video-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.video-desc {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.control-buttons {
  display: flex;
  margin-top: 30rpx;
  justify-content: space-around;
}

.control-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  padding: 15rpx 30rpx;
  font-size: 28rpx;
}
</style>